<template>
  <orh-trees
    :treesHead="treesHead"
    add="add"
    @on-add="addSilde"
    del="del"
    @on-del="confirm"
    reload
    @on-reload="refresh"
    search
    :searchOption="typelist"
    :searchOptionSelected="searchOptionSelected"
    @on-search="searchfun"
  >
    <Tree :data="trees" slot="trees" :load-data="treeData" @on-select-change="getNodes"></Tree>
    <Row slot="option" style="float: right;">
      <Col span="8">
        <div>
          <Button type="primary" size="small" v-button="'fenpeibut'" @click="headTeacher">班主任分配</Button>
        </div>
      </Col>
      <Col span="8" offset="8">
        <div>
          <Button type="primary" size="small" @click="ImportDemo">下载学生导入模板</Button>
        </div>
      </Col>
    </Row>
    <orh-sub-table pages :pageDate="pageDate" slot="content" @on-page-change="queryData">
      <Table
        :columns="columns1"
        @on-selection-change="selectOne"
        :data="dataList"
        :loading="tableload"
        slot="table"
        highlight-row
        ref="currentRowTable"
      ></Table>
    </orh-sub-table>

    <Modal v-model="promptpic" :title="promptpictitle" slot="others" :width="900">
      <component
        style="height:400px"
        :is="promptpicother"
        :classpicinfo="classpicinfo"
        :classpictype="classpictype"
        :infoId="infoId"
        @on-save="savefun"
      ></component>
      <div slot="footer">
        <Button long @click="promptpic=false">取消</Button>
      </div>
    </Modal>
    <orh-sidebar v-model="show" :title="pageTitle" cover slot="others">
      <component
        :is="which_to_show"
        :infoId="infoId"
        @showParent="showParent=>show=showParent"
        @backList="backList"
      ></component>
    </orh-sidebar>
  </orh-trees>
</template>

<script>
export default {
  components: {
    Operation: resolve => {
      require(["./Operation.vue"], resolve);
    },
    PhotoAlbum: resolve => {
      require(["./PhotoAlbum/PhotoAlbum.vue"], resolve);
    },
    ClassPic: resolve => {
      require(["./ClassPic.vue"], resolve);
    },
    ClassDown: resolve => {
      require(["./ClassDown.vue"], resolve);
    },
    AssignClassTeacher: resolve =>
      require(["&/Authpub/AssignClassTeacher/AssignClassTeacher.vue"], resolve)
  },
  name: "basicmodule-class",
  layout: "menu",
  data() {
    return {
      searchOptionSelected: "eclass_name",
      typelist: [
        {
          value: "eclass_name",
          label: "班级名称"
        },
        {
          value: "teacher_name",
          label: "班主任姓名"
        }
      ],

      // 菜单树
      trees: [],
      treesHead: {
        title: "年级菜单",
        button: false,
        button_text: "添加按钮"
      },
      jieUrl: "api/base/v1/get/all/arrives?period_id=",
      periodUrl: "api/base/v1/get/period/list",

      listUrl: "api/eclass/v1/eclass/lists?page=",
      delUrl: "api/eclass/v1/eclass/delete/",
      pageDate: {
        total: 0,
        current_page: 1,
        per_page: 10
      },
      pageTitle: null, //右边页面的title
      which_to_show: null,
      tableload: true, //表格加载动画

      del: [], //删除

      promptpic: false,
      promptpicother: false,
      promptpictitle: null,

      show: false,
      infoId: null, //用于向修改页面传id值
      classpicinfo: false,
      classpictype: "one",
      dataList: [], //班级变量
      columns1: [
        {
          type: "selection",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "班级名称",
          width: 100,
          fixed: "left",
          render: (h, params) => {
            return h(
              "div",
              params.row.eclass_name.zh
                ? params.row.eclass_name.zh
                : params.row.eclass_name.mn
            );
          }
        },
        {
          title: "班主任",
          width: 100,
          render: (h, params) => {
            if (params.row.teacher !== null) {
              let name = params.row.teacher.headteacher.teacher_name.zh
                ? params.row.teacher.headteacher.teacher_name.zh
                : params.row.teacher.headteacher.teacher_name.mn;
              return h("div", name);
            }
          }
        },
        {
          title: "届",
          width: 100,
          render: (h, params) => {
            if (params.row.arrive != undefined) {
              let name = params.row.arrive.name.zh
                ? params.row.arrive.name.zh
                : params.row.arrive.name.mn;
              return h("div", name);
            }
          }
        },
        {
          title: "班级类型",
          width: 100,
          render: (h, params) => {
            if (params.row.class_kind !== null) {
              let class_kind_dict = params.row.class_kind.dictionary_name
                ? params.row.class_kind.dictionary_name.zh
                  ? params.row.class_kind.dictionary_name.zh
                  : params.row.class_kind.dictionary_name.mn
                : "";
              return h("div", class_kind_dict);
            }
          }
        },
        {
          title: "班级性质",
          width: 100,
          render: (h, params) => {
            if (params.row.classnature !== null) {
              let classnature = params.row.classnature.dictionary_name
                ? params.row.classnature.dictionary_name.zh
                  ? params.row.classnature.dictionary_name.zh
                  : params.row.classnature.dictionary_name.mn
                : "";
              return h("div", classnature);
            }
          }
        },
        {
          title: "班级教室",
          width: 180,
          render: (h, params) => {
            if (
              params.row.buildings !== null &&
              params.row.unit !== null &&
              params.row.floor !== null &&
              params.row.room !== null
            ) {
              let room = params.row.buildings.buildings_name
                ? params.row.buildings.buildings_name.zh
                : "" +
                  "/" +
                  params.row.unit.unit_name.zh +
                  "/" +
                  params.row.floor.floor_name.zh +
                  "/" +
                  params.row.room.name.zh;
              return h("div", room);
            }
          }
        },
        {
          title: "是否毕业班",
          key: "graduated_flag_name",
          width: 100,
          render: (h, params) => {
            let graduated_flag_name = null;
            if (params.row.graduated_flag == 0) {
              graduated_flag_name = "否";
            } else if (params.row.graduated_flag == 1) {
              graduated_flag_name = "是";
            }
            return h("div", graduated_flag_name);
          }
        },
        {
          title: "班级人数",
          key: "eclass_people",
          width: 100
        },
        {
          title: ""
        },
        {
          title: "操作",
          key: "action",
          width: 270,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  directives: [
                    {
                      name: "button",
                      value: "look"
                    }
                  ],
                  props: {
                    type: "success",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.lookpic(params.row.eclass_id);
                    }
                  }
                },
                "查看相册"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.addpic(params.row.eclass_id);
                    }
                  }
                },
                "添加相册"
              ),
              h(
                "Button",
                {
                  directives: [
                    {
                      name: "button",
                      value: "edit"
                    }
                  ],
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.update(params.row.eclass_id);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  directives: [
                    {
                      name: "button",
                      value: "del"
                    }
                  ],
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.del = [params.row.eclass_id];
                      this.confirm();
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ]
    };
  },
  methods: {
    /************************************************************
     *
     * 请求学段数据
     *
     ************************************************************/
    load() {
      this.$http
        .get(this.periodUrl)
        .then(val => {
          val.data.forEach(el => {
            this.trees.push({
              title: el.period_name.zh ? el.period_name.zh : el.period_name.mn,
              value: el.id,
              loading: false,
              state: 1,
              children: []
            });
          });
        })
        .catch(err => {
          if (err.code && err.code == 422) {
            this.$Message.error(err.message);
          }
        });
    },

    /************************************************************
     *
     * 请求树子级数据
     *
     ************************************************************/
    treeData(item, callback) {
      this.$http
        .get(this.jieUrl + item.value)
        .then(val => {
          let arr = [];
          val.data.forEach(el => {
            let names = "";
            let name1 = el.grade;
            let name2 = el.grade_id;
            if (name1 == null && name2 == null) {
              names = "(未入学)";
            }
            if (name1 == null && name2 == 0) {
              names = "(已毕业)";
            }
            if (name1 != null && name2 != null) {
              names = "(" + name1.grade_name.zh + ")";
            }
            arr.push({
              title: (el.name.zh ? el.name.zh : el.name.mn) + names,
              value: el.id,
              state: 2
            });
          });
          callback(arr);
        })
        .catch(err => {
          if (err.code && err.code == 422) {
            this.$Message.error(err.message);
          }
        });
    },

    /************************************************************
     *
     * 处理数据
     *
     ************************************************************/
    process(data) {
      let arr = [];
      data.forEach(item => {
        item.title = item.grade_name.zh
          ? item.grade_name.zh
          : item.grade_name.mn;
        item.value = item.id;
        arr.push(item);
      });
      return arr;
    },

    /************************************************************
     *
     * 学生导入模板下载
     *
     ************************************************************/
    ImportDemo() {
      this.promptpic = true;
      this.promptpictitle = "下载学生导入模板";
      this.promptpicother = "ClassDown";
    },

    /************************************************************
     *
     * 获取班级的数据
     *
     ************************************************************/
    queryData(index = 1) {
      this.tableload = true;
      this.$http
        .get(this.listUrl + index)
        .then(val => {
          this.dataList = val.data.data;

          this.pageDate.total = val.data.total;
          this.pageDate.per_page = val.data.per_page;
          this.pageDate.current_page = val.data.current_page;
          this.tableload = false;
        })
        .catch(err => {
          if (err.code && err.code == 422) {
            this.$Message.error(err.message);
          }
          this.tableload = false;
        });
    },

    /************************************************************
     *
     * 点击添加按钮是
     *
     ************************************************************/
    addSilde() {
      this.infoId = false;
      this.show = true;
      this.pageTitle = "添加";
      this.which_to_show = "Operation";
    },

    /************************************************************
     *
     * 点击编辑时向子组件传数据
     *
     ************************************************************/
    update(index) {
      console.log(index);
      this.infoId = index;
      this.show = true;
      this.pageTitle = "修改";
      this.which_to_show = "Operation";
    },

    /************************************************************
     *
     * 班级相册查看
     *
     ************************************************************/
    lookpic(index) {
      this.infoId = index;
      this.show = true;
      this.pageTitle = "班级相册";
      this.which_to_show = "PhotoAlbum";
    },

    /************************************************************
     *
     * 班级相册添加
     *
     ************************************************************/
    addpic(index) {
      this.infoId = index;
      this.promptpic = true;

      this.promptpictitle = "添加相册";
      this.promptpicother = "ClassPic";
    },

    /************************************************************
     *
     * 班主任分配
     *
     ************************************************************/
    headTeacher() {
      this.promptpic = true;
      this.promptpictitle = "班主任分配";
      this.promptpicother = "AssignClassTeacher";
    },
    /************************************************************
     *
     * 班级相册添加成功后返回
     *
     ************************************************************/
    savefun(val) {
      this.promptpic = val;
      this.queryData(this.pageDate.current_page);
    },
    /************************************************************
     *
     * 批量删除
     *
     ************************************************************/
    selectOne(index) {
      this.del = index.map(item => item.eclass_id);
    },

    /************************************************************
     *
     * 执行删除操作
     *
     ************************************************************/
    confirm() {
      this.$Modal.confirm({
        title: "数据删除",
        content: "<p>您确定要删除这些数据吗?</p>",
        onOk: () => {
          if (this.del.length == 0) {
            this.$Message.error("请选择删除项");
            return;
          }
          this.del = JSON.stringify(this.del);
          this.tableload = true;
          this.$http
            .delete(`${this.delUrl}${this.del}`)
            .then(val => {
              this.del = [];
              this.queryData(this.pageDate.current_page);
              this.$Message.success(val.message);
            })
            .catch(err => {
              console.log(err);
              if (err.code && err.code == 422) {
                this.$Message.error(err.message);
              }
              this.del = [];
              this.tableload = false;
            });
        }
      });
    },

    /************************************************************
     *
     * 刷新数据（当前分页）
     *
     ************************************************************/
    refresh() {
      this.listUrl = `api/eclass/v1/eclass/lists?page=`;
      this.queryData(this.pageDate.current_page);
    },

    /************************************************************
     *
     * 添加提交后子组件向父组件传所返回的数据，实现实时更新
     *
     ************************************************************/
    backList(val) {
      if (val == true) {
        this.show = false;
        this.queryData(this.pageDate.current_page);
      }
    },

    /************************************************************
     *
     * 树节点
     *
     ************************************************************/
    getNodes(data) {
      if (data[0].state == 2) {
        this.tableload = true;
        this.show = false;
        // 通过年级获取班级
        this.listUrl = `api/eclass/v1/eclass/all_eclass?id=${data[0].value}&page=`;
        this.queryData();
      }
    },

    /************************************************************
     *
     * 关键字搜索
     *
     ************************************************************/
    searchfun(val, type) {
      this.listUrl = `api/eclass/v1/eclass/lists?searchtype=${type}&searchvalue=${val}&page=`;
      this.queryData();
    }
  },
  mounted() {
    this.load();
    this.queryData();
  }
};
</script>